<template>
    <div class="demo-box bg-white p10">
        <h1>demo 页面使用测试</h1>
        <h2>
            <p class="text-center">用户名：{{userInfo.userName}}</p>
            <p class="text-center">手机号：{{userInfo.tel}}</p>
            <a-button 
                type="primary"
                @click="getServeData">
                获取数据
            </a-button>
        </h2>
        <h1>
            <p class="demo-data flex j-flex-start a-center wrap p20"
               v-for="(i, k) in demo" 
               :key="k">
                <span class="mb20 p10 text-white">{{k}}: </span>
                <span class="p20 text-dark">{{i}}</span>
            </p>
        </h1>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { get } from 'lodash';

export default {
    // layout: 'demo', // 模板引用
    layout: 'admin', // 模板引用
    auth: false,  // 路由跳转做登录权限验证
    // middleware: 'permit', // 权限中间件单独页面设置
    async asyncData({ app: { $api, $auth }, store, route, query, params, redirect }) {
        await store.dispatch('demo/demo/getServerData', { $api })

        // const result = await $api.get('/api/uploadCollections')
        return {
            // banners: result,
        }
    },
    head() {
        return {
            title: 'demo专页测试练习'
        }
    },
    computed: {
        ...mapState({
                demo: state => state.demo.demo.demoData,
                isLoading: state => state.demo.demo.isLoading,
                userInfo: state => get(state, 'auth.user.userInfo', {})
            })
    },
    data() {
        return {
            
        }
    },
    methods: {
        async getServeData() {
            const { data: { data, success } } = await this.$api.get('/app/data.json', {
                asd: '',
                asde: 'null',
                asdf: null,
                asdg: undefined,
                asdh: 'undefined',
            })
            console.log('接口返回数据=>>>', data)
        }
    },
    mounted() {
        // this.getServeData()
        // console.log('store=>>', this.$store)
    },
}
</script>
<style lang="less" scoped>
.demo-data{
    span{
        border-radius: 10px;
        box-shadow: 0 0 20px 0 rgba(0,0,0,.15);

        &:first-of-type{
            border-radius: 4px;
            background: cornflowerblue;
        }
    }
}
</style>